import React, { useRef } from 'react';
import { Button, Form, Input, Modal, Select } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { productListAddProduct } from '../../reducers/newOrderReducer';

export default function AddOrder({ props, open, setOpen }) {
    let newOrder = useSelector(store => store.neworder.newOrder)
    let productList = useSelector(store => store.neworder.productList)
    const formRef = useRef(null);
    let dispatch = useDispatch()
    const handleCancel = () => {
        setOpen(false);
        formRef.current?.resetFields();
    };
    const onFinish = async (values) => {
        let data = {
            id: productList.info.length + 1,
            partaid: newOrder.partainfo._id,
            partbid: newOrder.partbinfo._id,
            partaname: newOrder.partainfo.partaname,
            productname: props.productnameList.filter(item => item._id === values.productname)[0].productname,
            productmodel: values.productmodel,
            productcolor: props.productcolorList.filter(item => item._id === values.productcolor)[0].productcolor,
            productdirection: props.productdirectionList.filter(item => item._id === values.productdirection)[0].productdirection,
            productlight: props.productlightList.filter(item => item._id === values.productlight)[0].productlight,
            productnum: values.productnum,
            productprice: values.productprice,
            productsize: values.productsize,
        }
        dispatch(productListAddProduct(data))
        setOpen(false);
        formRef.current?.resetFields();
    };
    const onFinishFailed = (errorInfo) => { };
    const handleChange = (value) => {
        let checkProductnName = props.productnameList.filter(item => item._id === value)
        formRef.current?.setFieldsValue({ productmodel: checkProductnName[0].productmodel });
    };
    return (
        <Modal
            title='新增订货单'
            open={open}
            // onOk={handleOk}
            onCancel={handleCancel}
            footer={null}
        >
            <Form
                ref={formRef}
                name="basic"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label='选择产品名称'
                    name='productname'
                    rules={[{ required: true, message: '产品名称不能为空' }]}
                >
                    <Select
                        initialvalues={(newOrder.prodcuctinfo && newOrder.prodcuctinfo[newOrder.prodcuctinfo.length - 1].productname) ?? "选择产品名称"}
                        style={{ width: 300, margin: '15px 0' }}
                        onChange={handleChange}
                        options={props.productnameList.map(item => ({
                            value: item._id,
                            label: item.productname
                        }))}
                    />
                </Form.Item>
                <Form.Item name="productmodel" label='产品型号' rules={[{ required: true, message: '型号不能为空' }]}>
                    <Input />
                </Form.Item>
                <Form.Item
                    label='选择产品颜色'
                    name='productcolor'
                    rules={[{ required: true, message: '产品名称不能为空' }]}
                >
                    <Select
                        initialvalues={(newOrder.prodcuctinfo && newOrder.prodcuctinfo[newOrder.prodcuctinfo.length - 1].productcolor) ?? "选择产品名称"}
                        style={{ width: 300, margin: '15px 0' }}
                        // onChange={handleChange}
                        options={props.productcolorList.map(item => ({
                            value: item._id,
                            label: item.productcolor
                        }))}
                    />
                </Form.Item>
                <Form.Item
                    label='选择产品方向'
                    name='productdirection'
                    rules={[{ required: true, message: '产品名称不能为空' }]}
                >
                    <Select
                        initialvalues={(newOrder.prodcuctinfo && newOrder.prodcuctinfo[newOrder.prodcuctinfo.length - 1].productdirection) ?? "选择产品名称"}
                        style={{ width: 300, margin: '15px 0' }}
                        // onChange={handleChange}
                        options={props.productdirectionList.map(item => ({
                            value: item._id,
                            label: item.productdirection
                        }))}
                    />
                </Form.Item>
                <Form.Item
                    label='选择产品光源'
                    name='productlight'
                    rules={[{ required: true, message: '产品名称不能为空' }]}
                >
                    <Select
                        initialvalues={(newOrder.prodcuctinfo && newOrder.prodcuctinfo[newOrder.prodcuctinfo.length - 1].productlight) ?? "选择产品名称"}
                        style={{ width: 300, margin: '15px 0' }}
                        // onChange={handleChange}
                        options={props.productlightList.map(item => ({
                            value: item._id,
                            label: item.productlight
                        }))}
                    />
                </Form.Item>

                <Form.Item name="productsize" label='规格(mm)' rules={[{ required: true, message: '规格不能为空' }]}>
                    <Input type='number' />
                </Form.Item>
                <Form.Item name="productnum" label='数量(支)' rules={[{ required: true, message: '数量不能为空' }]}>
                    <Input type='number' />
                </Form.Item>
                <Form.Item name="productprice" label='单价(元/米)' rules={[{ required: true, message: '单价不能为空' }]}>
                    <Input type='number' />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button key="submit" htmlType="submit" type="primary" >
                        确认
                    </Button>,
                    <Button key="back" onClick={handleCancel}>
                        取消
                    </Button>
                </Form.Item>
            </Form>

        </Modal>
    );
}
